<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <!-- jQuery 2.0.2 -->
        <script src="${initParam.root }/static/js/jquery.min.js"></script>
        <script src="${initParam.root }/static/js/jquery-migrate-1.2.1.js"></script>
        <!-- jQuery UI 1.10.3 -->
        <script src="${initParam.root }/static/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
        <!-- Bootstrap -->
        <script src="${initParam.root }/static/js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="${initParam.root }/static/js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- fullCalendar -->
        <script src="${initParam.root }/static/js/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
		<!-- datepicker -->
		<script src="${initParam.root }/static/js/plugins/datetimepicker/js/bootstrap-datetimepicker.js"></script>
		<script src="${initParam.root }/static/js/plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<!-- iCheck -->
		<script src="${initParam.root }/static/js/plugins/iCheck/icheck.min.js"></script>
		<!-- validate -->
		<script src="${initParam.root }/static/js/jquery.validate.js"></script>
        <!-- Page specific script -->
        <script type="text/javascript">
            $(function() {
            	/*关闭按钮*/
            	$("#btn_first_close,#btn_second_close").click(function(){
            		$('#ycy_ck_allday').iCheck('uncheck');
            	});
            	
				/*表单验证*/
				$("#eventForm").validate({
					rules:{
						'event.title':{required:true}
					},
					messages:{
						'event.title':{required:"请填写标题"}
					}
				})
				
            	/* 初始化事件*/
                function ini_events(ele) {
                    ele.each(function() {
                    	/*给事件添加拖动功能*/
            			// 创建事件对象 (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            			//不需要开始或结束
                        var eventObject = {
                            title: $.trim($(this).text()) // use the element's text as the event title
                        };

                     	// 存储事件对象在Dom元素中，方便之后我们获取
                        $(this).data('eventObject', eventObject);

                     // 使用JQueryUI使事件可拖动使用
                        $(this).draggable({
                            zIndex: 1070,
                            revert: true, // 将让事件回到原位
                            revertDuration: 0  //  拖动后的初始位置
                        });

                    });
                }
                ini_events($('#external-events div.external-event'));

                /*初始化日历*/
                var date = new Date();
                var d = date.getDate(),
                        m = date.getMonth(),
                        y = date.getFullYear();
                var calendarInfo=$('#calendar').fullCalendar({
                	//头部
                	header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaDay'
                    },
                    buttonText: {//点击此按钮可以去到上一个月或者下一个月
                        prev: "<span class='fa fa-caret-left'></span>",
                        next: "<span class='fa fa-caret-right'></span>",
                        today: '今日',
                        month: '月份',
                        week: '周',
                        day: '日'
                    },
                    monthNames:[
                    	'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                    ],
                    monthNamesShort:[
                    	'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                    ],
                    dayNames:[
                    	'星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
                    ],
                    dayNamesShort:[
                    	'星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
                    ],
                  	//默认事件
                  	events:function(start,end,callback){
                  		$.ajax({
                  			url:"${initParam.root}/rest/event",
                  			type:"get",
                  			dataType:"json",
                  			success:function(json){
                  				var eventData=[];
                  				if(json!=null){
                  					json.map(function(info){
                  						eventData.push({
                  							id:info.id,
                  							title:info.title,
                  							start:info.start,
                  							end:info.end,
                  							color:info.color,
                  							allDay:info.allDay
                  						});
                  					});
                  				}
                  				callback(eventData);
                  			}
                  		});
                  	},
                    editable: true,//设置日历中的日程是否可以编辑. 可编辑是指可以移动, 改变大小等
                    droppable: true, //允许事件加到日历中
                    drop: function(date, allDay) { //在一个日程事件被移动, 并成功移动到另外一个日期/时间

                    	// 检索需要元素，存储到对象中
                        var originalEventObject = $(this).data('eventObject');

                     	// 复制它，这样多个事件就不会引用同一个对象了
                        var copiedEventObject = $.extend({}, originalEventObject);

                        // assign it the date that was reported
                        copiedEventObject.start = date;
                        copiedEventObject.allDay = allDay;
                        copiedEventObject.backgroundColor = $(this).css("background-color");
                        copiedEventObject.borderColor = $(this).css("border-color");

                     	// 在日历上渲染这个事件
            			//renderEvent：将一个新的CalEvent对象渲染到日历中, 该对象至少要有title和start属性.
            			//如果设置stick参数为true, 则会保证新渲染的CalEvent对象永久保留.
            			//removeEvents: $(‘.selector').fullCalendar(‘removeEvents', [idOrFilter])从日历中删除一个日程事件. 第二个参数可以不填, 可以填id, 可以是一个过滤器
                        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                     	// 如果勾了 "remove after drop"的checkbox就会移除增加了的事件
                        if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove();
                        }
                    },
                    dayClick: function(date, allDay, jsEvent, view) {
                    	var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期（为了全天而用）
                    	$("#ycy_ck_allday").attr("data-allday",selDate);//全日日期
                    	
                    	//具体时间
                    	var getHourMinute=new Date();
                    	var detailDate=selDate+" "+fillZero(getHourMinute.getHours())+":"+fillZero(getHourMinute.getMinutes());
                		$("#ycy_ck_allday").attr("data-onetime",detailDate);
                		
                		$("#startTime").val(detailDate);
                		
                		$("#startTime").datetimepicker({
            				format:"yyyy-mm-dd hh:ii",//设置日期格式
            				autoclose:true,//点击完自动关闭
            				language:"zh-CN",//国际化中文
            				initialDate:new Date(detailDate)
            			});
                		
                		var endDetailDate=selDate+" "+fillZero(getHourMinute.getHours()*1+1)+":"+fillZero(getHourMinute.getMinutes());
                		
                		$("#endTime").datetimepicker({
	        				format:"yyyy-mm-dd hh:ii",//设置日期格式
	        				autoclose:true,//点击完自动关闭
	        				language:"zh-CN",//国际化中文
	        				initialDate:new Date(endDetailDate)
        				});
                    	
                    	$("#add_modal").modal('show');
                    	
                    	//初始化
                    	$("#add_modal").attr("data-flag","");
                    	$(".modal-title").text("添加行程");
        				$("#btn_deleteEvent").hide();
            			$("#event_id").val("");
           				$("#title").val("");
           				$("#location").val("");
           				$("#ycy_ck_allday").val("");
           				$("#endTime").val("");
           				$("#ycy_div_actorList").html("<i class='fa fa-fw fa-plus-circle' id='i_addAcotr'></i><label id='lbl_addAcotr'>添加参与者</label>");
           				//清空已存在参加者	
           				$("#insertedActor").text("");
           				$("#description").val("");
           				//恢复颜色
           				var currColor = "#f56954";
           				$("#color").val(currColor);
           				$("#color-chooser-btn").css({"background-color": currColor, "border-color": currColor})
           										.html('Color <span class="caret"></span>');
           				$('#ycy_ck_allday').iCheck('uncheck');
           				//恢复可以用
           				$("#eventForm input,#eventForm textarea").attr("readonly",false);
    					$("#color-chooser-btn").attr("disabled",false);
    					$("#ycy_div_isAllDay,#ycy_div_actorList,#btn_editEvent").show();
                    },
                    //点击事件
                    eventClick: function(calEvent, jsEvent, view) {
                    	var eventId = calEvent.id;
                    	$.ajax({
                    		url:"${initParam.root}/rest/event/info/"+eventId,
                    		type:"get",
                    		dataType:"json",
                    		success:function(json){
                    			if(json!=null){
                    				if(json.jsonResult.isSuccess==false){//查看事件
                    					$("#eventForm input,#eventForm textarea").attr("readonly",true);
                    					$("#color-chooser-btn").attr("disabled",true);
                    					$("#ycy_div_isAllDay,#ycy_div_actorList,#btn_editEvent").hide();
                    					$("#btn_deleteEvent").hide();
                    				}else{//编辑事件
                    					$("#eventForm input,#eventForm textarea").attr("readonly",false);
                    					$("#color-chooser-btn").attr("disabled",false);
                    					$("#ycy_div_isAllDay,#ycy_div_actorList,#btn_editEvent").show();
                    					$("#btn_deleteEvent").show();
                    				}
                    				
                    				
                    				$("#add_modal").modal('show');
                    				$("#add_modal").attr("data-flag","update");
                    				$(".modal-title").text("编辑行程");
                    				
                    				//事件Id
                    				$("#event_id").val(json.eventDetails.event.id);
                    				//颜色
                    				var currColor=json.eventDetails.event.color;
                    				$("#color").val(currColor);
                    				$("#color-chooser-btn").css({"background-color": currColor, "border-color": currColor});
                    				//标题
                    				$("#title").val(json.eventDetails.event.title);
                    				$("#location").val(json.eventDetails.event.location);
                    				
                    				var allDay=json.eventDetails.event.allDay=="false"?false:true;
                    				$("#ycy_ck_allday").val(allDay);
                    				$("#ycy_ck_allday").prop("checked",allDay);
                    				
                    				
                    				var start = json.eventDetails.event.start;
                    				if(allDay==true){
                    					$('#ycy_ck_allday').iCheck({
                    						 checkboxClass: 'icheckbox_minimal', 
                    						 checkedClass: 'checked'
                    					})
                    					$("#ycy_ck_allday").attr("data-onetime",start+" 00:00");
                    					$("#ycy_ck_allday").attr("data-allday",start);
                    				}else{
                    					$('#ycy_ck_allday').iCheck('uncheck');
                    					$("#ycy_ck_allday").attr("data-onetime",start);
                                    	var date = new Date(start);
                                    	var simpleDate = date.getFullYear()+"-"+fillZero((date.getMonth()*1+1))+"-"+fillZero(date.getDate());
                                    	$("#ycy_ck_allday").attr("data-allday",simpleDate);//全日日期
                    				}
                    				$("#startTime").val(start);
                    				var end=json.eventDetails.event.end;
                    				if(end==null||end==""){
                    					$("#endTime").val("");
                    					end=start;
                    				}else{
                    					$("#endTime").val(end);
                    				}
                    				$('#startTime').datetimepicker('remove');
                                	$('#endTime').datetimepicker('remove');
                    				checkIsAllDay(allDay,start,end);
                    				//添加参加者
                    				$("#ycy_div_actorList").html("<i class='fa fa-fw fa-plus-circle' id='i_addAcotr'></i><label id='lbl_addAcotr'>添加参与者</label>");
                    				$("#insertedActor").text("参与者：")
                    				if(json.eventDetails.actorList!=null){
                    					json.eventDetails.actorList.map(function(actor){
                    						var line="<label class='existsActor'>"+actor.name+"</label>&nbsp;&nbsp;";
                    						$("#insertedActor").append(line);
                    					});
                    				}else{
                    					$("#insertedActor").append("无")
                    				}
                    				
                    				$("#description").val(json.eventDetails.event.description);
                    			}
                    		}
                    	});
                    },
                    //拖动事件
                    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
                    	var startTime=new Date(event.start);
                    	var start=startTime.getFullYear()+"-"+fillZero((startTime.getMonth()*1+1))+"-"+fillZero(startTime.getDate())+" "+fillZero(startTime.getHours())+":"+fillZero(startTime.getMinutes());
                    	
                    	var endTime=new Date(event.end==null?event.start:event.end);
                    	var end=endTime.getFullYear()+"-"+fillZero((endTime.getMonth()*1+1))+"-"+fillZero(endTime.getDate())+" "+fillZero(endTime.getHours())+":"+fillZero(endTime.getMinutes());
                    	var event = {"event.start":start,"event.id":event.id,"event.end":end}
                    	$.ajax({
                    		url:"${initParam.root}/rest/event/updatedrop",
                    		data:event,
                    		dataType:"json",
                    		type:"post",
                    		success:function(json){
                    			if(json!=null){
                    				if(json.isSuccess==false){
                    					//事件复位
                                    	revertFunc(); 
                    				}
                    			}	
                    		},
                    		error:function(){
                    			//事件复位
                            	revertFunc(); 
                    		}
                    	});
                    	
                    }
                }); 

                /* 选择事件的颜色 */
                var currColor = "#f56954"; //默认颜色
              	//选择颜色的按钮
                var colorChooser = $("#color-chooser-btn");
                $("#color-chooser > li > a").click(function(e) {//选择颜色
                    e.preventDefault();
                    //保存颜色
                    currColor = $(this).css("color");
                    $("#color").val(currColor);
                    //更改Color button的背景颜色和文本内容
                    colorChooser
                            .css({"background-color": currColor, "border-color": currColor})
                            .html($(this).text()+' <span class="caret"></span>');
                });
                
                //开始日期改变
                $("#startTime").change(function(){
                	$("#ycy_ck_allday").attr("data-onetime",$(this).val());
                	var date = new Date($(this).val());
                	var simpleDate = date.getFullYear()+"-"+fillZero((date.getMonth()*1+1))+"-"+fillZero(date.getDate());
                	$("#ycy_ck_allday").attr("data-allday",simpleDate);//全日日期
                });
                
               
                //显示受邀人列表
                var isOpen=false;
                $("#ycy_div_actorList").on("click","#lbl_addAcotr",function(){
                	checkOpen();
                })
                $("#i_addAcotr").click(function(){
                	checkOpen();
                });
                //是否打开
                function checkOpen(){
                	if(isOpen==false){
                		$("#div_actorList").slideDown();
                		isOpen=true;
                	}else{
                		$("#div_actorList").slideUp();
                		isOpen=false;
                	}
                }
                
                //点击受邀人列表
                $(".ycy_ul_actor").click(function(){
                	$(".ycy_ul_actor").next().slideUp();
                	$(this).next().slideDown();
                });
                //添加受邀请人
                $(".ycy_ul_click li").click(function(){
                	var id = $(this).attr("data-id")
                	var text=$(this).text();
                	$.ajax({
                		url:"${initParam.root}/rest/event/true",
                		type:"get",
                		dataType:"json",
                		data:{actorId:id},
                		success:function(json){
                			if(json.isSuccess==true){
                				$("#ycy_div_actorList #lbl_addAcotr").remove();
                            	var line="<label class='ycy_lbl_deleteActor' data-id='"+id+"'><i class='fa fa-fw fa-minus-circle'></i>"+text+"</label>"
                            	$("#ycy_div_actorList").append(line);
                			}
                		}
                	});
                	
                	
                	
                });
                //删除受邀请人
                $("#ycy_div_actorList").on("click",".ycy_lbl_deleteActor",function(){
                	var id = $(this).attr("data-id")
                	var info = $(this)
                	$.ajax({
                		url:"${initParam.root}/rest/event/false",
                		type:"get",
                		dataType:"json",
                		data:{actorId:id},
                		success:function(json){
                			if(json.isSuccess==true){
                				info.remove();
                				if($(".ycy_lbl_deleteActor").length==0){
                            		var line="<label id='lbl_addAcotr'>添加参与者</label>";
                            		$("#ycy_div_actorList").append(line);
                            	}
                			}
                		}
                	});
                	
                });
                
                
              	//是否全天
                $("#ycy_div_ck").on("ifClicked","#ycy_ck_allday",function(){
                	
                	$('#startTime').datetimepicker('remove');
                	$('#endTime').datetimepicker('remove');
                	if($(this).prop("checked")==true){//不选中
                		$("#ycy_ck_allday").prop("checked",false);
                		$("#ycy_ck_allday").val("false");
                		$("#endTime").val("");
                		var detailDay=$("#ycy_ck_allday").attr("data-onetime");
                		$("#startTime").val(detailDay);
                		
                		checkIsAllDay($("#ycy_ck_allday").prop("checked"),detailDay);
                	}else{
                		$('#ycy_ck_allday').iCheck({
   						 	checkboxClass: 'icheckbox_minimal', 
   						 	checkedClass: 'checked'
   						})
                		$("#ycy_ck_allday").prop("checked",true);
                		$("#ycy_ck_allday").val("true");
                		var allDay=$("#ycy_ck_allday").attr("data-allday");
                		$("#startTime").val(allDay);
                		$("#endTime").val(allDay);
                		
                		checkIsAllDay($("#ycy_ck_allday").prop("checked"),allDay)
                	}
                })
                
                //添加事件
                $("#btn_editEvent").click(function(){
                	/* 异步调用validate */
                	if(!$("#eventForm").valid()){
                		return;	
                	}
                	
                	var info=$("#eventForm").serialize();
                	if($("#add_modal").attr("data-flag")=="update"){
                		$.ajax({
                    		url:"${initParam.root}/rest/event/update",
                    		type:"post",
                    		dataType:"json",
                    		data:info,
                    		success:function(json){
                    			if(json.isSuccess==true){
                    				$('#calendar').fullCalendar('refetchEvents');
                    				$("#add_modal").modal('hide');
                    				$('#ycy_ck_allday').iCheck('uncheck');
                    			}
                    		}
                    	});
                		return;
                	}
                	
                	
                	$.ajax({
                		url:"${initParam.root}/rest/event/add",
                		type:"post",
                		dataType:"json",
                		data:info,
                		success:function(json){
                			if(json.isSuccess==true){
                				$('#calendar').fullCalendar('refetchEvents');
                				$("#add_modal").modal('hide');
                			}
                		}
                	});

                })
                //删除事件
                $("#btn_deleteEvent").click(function(){
                	if(confirm("是否要删除此行程？")==false){
                		return;
                	}
                	$.ajax({
                		url:"${initParam.root}/rest/event/delete",
                		type:"post",
                		dataType:"json",
                		data:{eventId:$("#event_id").val()},
	                	success:function(json){
	            			if(json.isSuccess==true){
	            				$('#calendar').fullCalendar('refetchEvents');
	            				$("#add_modal").modal('hide');
	            			}
	            		}
                	})
                });
                
            });
          //补零
            function fillZero(number){
            	if(number<10){
            		return "0"+number;
            	}
            	return number;
            }
          
          //修改datetimepicker（by 是否全天）
           function checkIsAllDay(isAllDay,start,end){
       	  	
      		  if(isAllDay==true){
            		$("#startTime").datetimepicker({
        				format:"yyyy-mm-dd",//设置日期格式
        				autoclose:true,//点击完自动关闭
        				language:"zh-CN",//国际化中文
        				minView:"month",//只选择日期，不要时间
        				initialDate:new Date(start)
        				
        			});
            		$("#endTime").datetimepicker({
        				format:"yyyy-mm-dd",//设置日期格式
        				autoclose:true,//点击完自动关闭
        				language:"zh-CN",//国际化中文
        				minView:"month",//只选择日期，不要时间
        				initialDate:new Date(start)
    				});
            		
            		
            	}else{
            		$("#startTime").datetimepicker({
        				format:"yyyy-mm-dd hh:ii",//设置日期格式
        				autoclose:true,//点击完自动关闭
        				language:"zh-CN",//国际化中文
        				initialDate:new Date(start)
        			});
            		
					if(end==null||end==""){
						$("#endTime").datetimepicker({
	        				format:"yyyy-mm-dd hh:ii",//设置日期格式
	        				autoclose:true,//点击完自动关闭
	        				language:"zh-CN",//国际化中文
	        				initialDate:new Date(start)
	    				});
            		}else{
            			$("#endTime").datetimepicker({
	        				format:"yyyy-mm-dd hh:ii",//设置日期格式
	        				autoclose:true,//点击完自动关闭
	        				language:"zh-CN",//国际化中文
	        				initialDate:new Date(end)
	    				});
            		}
            	}
           }
          
        </script>